<script setup>
import { ref } from "vue";

// Api
import { login } from "@/api/auth";

// Config
import { tokenKey, userKey } from "@/config/cache-keys";

//Hooks
import { setCookie, getCookie } from "@/hooks/useCookie";
import { onLink } from "@/hooks/useRoute";

const form = ref(getCookie(userKey) || { username: "", password: "", otp_code: "" });
form.value.otp_code = "";

async function onLogin() {
  const { data } = await login(form.value);
  setCookie(userKey, form.value);
  setCookie(tokenKey, data.token);
  onLink({ url: "/pages/index/index", linkType: "redirectTo" });
}
</script>

<template>
  <view class="login">
    <view class="login-label">chancoki's cloud</view>

    <view class="login-input">
      <nut-input v-model="form.username" placeholder="用户名" />
      <nut-input v-model="form.password" type="password" placeholder="密码" />
      <nut-input v-model="form.otp_code" placeholder="OTP代码,如有请输入" />
    </view>

    <nut-button type="primary" size="large" @click="onLogin">登录</nut-button>
  </view>
</template>

<style lang="scss">
.login {
  padding: 20px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-self: center;
}

.login-label {
  margin-top: 100px;
  font-size: 100px;
  text-align: center;
  margin-bottom: 100px;
}

.login-input {
  margin-bottom: 50px;
}
</style>
